<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
    <title>设备端子计算与设备捕捉</title>
    <link rel="stylesheet" href="css/demo.css">
    <script src="js/configData.js"></script>

    <script src="libs/axios.min.js"></script>
    <script src="libs/httpService.js"></script>
    <script src="js/demo.js"></script>
    <style>
        .icon {
            display: inline-block;
            text-align: center;
            color: #fff;
            width: 60px;
            height: 20px;
            margin: 0 10px;
            text-shadow: -1px 0 0 #333, 1px 0 0 #333, 0 1px 0 #333, 0 -1px 0 #333
        }
    </style>
</head>
<body id="body">
<div id='map'></div>
<div class="opt_panel">
    <button onclick="onStartDraw()">开始框选(默认矩形)</button>
    <button onclick="onEndDraw()">停止框选</button>

    <br>
    <button onclick="onStartSnap()">开始捕捉</button>
    <button onclick="onEndSnap()">停止捕捉</button>
    图例:
    <div class="icon" style="background:#ff0000">端子</div>
    <div class="icon" style="background:#00ff00">线</div>
    <div class="icon" style="background:#0000ff">点</div>
    <div class="icon" style="background:#ffff00">网格线</div>
    <div class="icon" style="background:#ff00ff">网格点</div>
</div>
</body>
</html>

<script>
    var pointDev = null
    var lineDev = null
    var testDatas = null
    var symbolLayer = null

    mapOptions = {
        center: [118.24059935003356, 24.533220751934863],//[118.19032804148651, 24.478426264353757],
        zoom: 23.5//20
    }

    selectToolOptions = {
        type: 'rectangle',
        borderFillStyle: 'rgba(56,135,190,0.1)',//框选的填充色
        borderStyle: '2px solid #ff0000',//框选的边框样式
        // layers: ['301000']//打开此选项，可以过滤被选中的目标图层
        selectedColor: '#ff00ff',
        isAddOn: false,
        cursorStyle: 'move',
    }

    snapToolOptions = {
        // types: ['cellPoint', 'cellLine', 'point', 'line', 'terminal'],//捕捉的类型(全部)
        types: ['terminal', 'line'],//捕捉的类型(不含网格)
        priority: ['cellPoint', 'cellLine', 'terminal', 'point', 'line']//捕捉的优先级
    }


    function onStartDraw() {
        snapTool.disable()
        //框选工具开启后的操作方式为：1.点击地图确定第一个点，2.移动鼠标改变矩形大小,3.点击鼠标确定第二个点
        selectTool.enable()
    }

    //关闭框选工具
    function onEndDraw() {
        selectTool.disable(true)
    }

    //开启捕捉工具
    function onStartSnap() {
        selectTool.disable(true)
        snapTool.enable()
    }

    //关闭捕捉工具
    function onEndSnap() {
        snapTool.disable()
    }

    //有捕捉到设备的时候，动态更新预览线最后一个点
    function moveLine(point) {
        let lineGeom = lineDev.getGeometry()
        let endPoint = map.project({
            lng: lineGeom[0][lineGeom[0].length - 1][0],
            lat: lineGeom[0][lineGeom[0].length - 1][1]
        })
        let startPoint = map.project({
            lng: lineGeom[0][lineGeom[0].length - 2][0],
            lat: lineGeom[0][lineGeom[0].length - 2][1]
        })

        let angle = egisV2.util.DataUtil.transSymbolAngle(startPoint, endPoint)
        //根据端子偏移量计算出中心点位置
        let terminals = egisV2.util.DataUtil.calcDeviceTerminal("2030020", '11000000', {
            lng: point[0],
            lat: point[1]
        }, angle, 3, 1.25)
        pointDev.symbolRotate = angle
        pointDev.setGeometry([terminals[1].lng, terminals[1].lat])

        //size加倍，计算出另一个端子的位置,作为预览线与预览符号连接点的位置
        let terminals2 = egisV2.util.DataUtil.calcDeviceTerminal("2030020", '11000000', {
            lng: point[0],
            lat: point[1]
        }, angle, 3 * 2, 1.25)

        lineGeom[0][lineGeom[0].length - 1] = [terminals2[1].lng, terminals2[1].lat]
        lineDev.setGeometry(lineGeom)

    }

    let snapData = null

    function initPage() {
        //初始化矢量栅格图层
        mapServiceUrl = msServiceUrl + '/mapservice/mapexport/vecformat'
        initGridLayer()
        // map.fitBounds([[118.189849099421, 24.478195980792577], [118.19080698355202, 24.47865654749357]])
        pointDev = new egisV2.symbol.ElePointSymbol({
            // convertSize:true,
            devId: 'a001' + new Date().getTime(),//oid，psrid
            devTypeId: '110000',//设备类型
            symbolId: "2030020",//符号ID
            symbolRotate: 0,//旋转角度
            symbolSize: 3,//大小
            symbolColor: '#ff0000',//颜色
            symbolOpacity: 1,//透明度
            symbolScalable: true,//缩放
            coordinates: [118.17253496070641, 24.464226692660446],//坐标
            attributes: {sbzlx: '11000000'}//其它信息
        })


        lineDev = new egisV2.symbol.EleLineSymbol({
            devId: 'b20fdfds001',//oid，psrid
            devTypeId: '354219fdsfds85',//设备类型
            symbolId: '410',//符号ID
            symbolWidth: 6,//线宽
            // convertSize:false,//栅格数据所需使用的参数
            symbolColor: '#ff00ff',//颜色
            symbolOpacity: 1,//透明度
            coordinates: [
                [[118.17253496070641, 24.464226692660446], [118.16953496070641, 24.461226692660446]]
            ],//坐标
            attributes: {c: 3, d: 4}//其它属性
        })
        testDatas = [
            pointDev,
            lineDev
        ]

        symbolLayer = new egisV2.layer.SymbolLayer(map)
        symbolLayer.addEleDevs(testDatas)

        initSelectTool()
        initSnapTool()
        snapTool.on(egisV2.event.SnapEvent.DEV_SNAPPED, e => {
            if (e && e.geomType != 'cellLine' && e.geomType != 'cellPoint') {
                snapData = e
                console.log(e.geomType)
                console.log(e)
                // moveLine([e.point.lng, e.point.lat])
            } else {
                snapData = null
            }

        })
        map.on('mousemove', e => {
            if (snapTool.getEnable()) {
                if (snapData) {
                    moveLine([snapData.point.lng, snapData.point.lat])
                } else {
                    moveLine([e.lngLat.lng, e.lngLat.lat])
                }
            }

        })
        //当有捕捉数据的时候点击给线添加个节点
        map.on('click', e => {
            if (snapData) {
                let lineGeom = lineDev.getGeometry()


                let startPoint = map.project({
                    lng: lineGeom[0][lineGeom[0].length - 1][0],
                    lat: lineGeom[0][lineGeom[0].length - 1][1]
                })
                let endPoint = map.project({
                    lng: lineGeom[0][lineGeom[0].length - 2][0],
                    lat: lineGeom[0][lineGeom[0].length - 2][1]
                })

                let angle = egisV2.util.DataUtil.transSymbolAngle(startPoint, endPoint)

                let terminals = egisV2.util.DataUtil.calcDeviceTerminal("2030020", '11000000', snapData.point, angle, 3, 1.25)
                //添加一个变压器
                var byq = new egisV2.symbol.ElePointSymbol({
                    // convertSize:true,
                    devId: 'a001' + new Date().getTime(),//oid，psrid
                    devTypeId: '110000',//设备类型
                    symbolId: "2030020",//符号ID
                    symbolRotate: (angle + 180) % 360,//旋转角度
                    symbolSize: 3,//大小
                    symbolColor: '#ff0000',//颜色
                    symbolOpacity: 1,//透明度
                    symbolScalable: true,//缩放
                    coordinates: [terminals[0].lng, terminals[0].lat],//坐标
                    attributes: {sbzlx: '11000000'}//其它信息
                })
                symbolLayer.addEleDevs([byq])

                lineGeom[0].splice(lineGeom[0].length - 1, 0, [snapData.point.lng, snapData.point.lat])
                lineDev.setGeometry(lineGeom)
            }

        })
    }

    window.onload = function () {
        loadGeoMap_ms(initPage)
    }

</script>
